<template>
	<view class="wapper">
		<view class="con-con">
			<u-tabs @click="clickTab" :current="checkTab" :list="tabList" lineWidth="60rpx" lineColor="#4080FF"
				:activeStyle="{
					       color: '#4080FF',
					       fontWeight: 'bold',
					       transform: 'scale(1.05)',
					   }" :inactiveStyle="{
					       color: '#606266',
					       transform: 'scale(1)'
					   }" itemStyle="padding:0 88rpx;height: 80rpx;background: #fff;">
			</u-tabs>
			<search @search="search" ref="search" />
			<view class="search-text">
				<view :class="workOrderStatusName?'status':'approval'" @click="open(1)" v-if="checkTab===0">

					{{workOrderStatusName || '审批状态'}}
					<u-icon name="arrow-down-fill" size="18rpx" :color="workOrderStatusName?'#1D6FE9':'#909399'">
					</u-icon>
				</view>
				<view :class="handleStatusName?'status':'approval'" @click="open(3)" v-if="checkTab===1">

					{{handleStatusName || '处理状态'}}
					<u-icon name="arrow-down-fill" size="18rpx" :color="handleStatusName?'#1D6FE9':'#909399'">
					</u-icon>
				</view>
				<view :class="approvalTypeName?'status':'approval'" @click="open(2)">
					{{approvalTypeName || '工单类型'}}
					<u-icon name="arrow-down-fill" size="18rpx" :color="approvalTypeName?'#1D6FE9':'#909399'">
					</u-icon>
				</view>
			</view>

			<scroll-view style="height:calc(100vh - 300rpx)" scroll-y="true" @scrolltolower="loadmore">
				<template v-if="list && list.length>0">
					<view class="list">
						<view class="item" v-for="(item ,index) in list" :key="index" @click="navTo(item)">
							<view class="item-title">
								<!--  1审批中 2待完成 3待验收 4已完成 5已驳回 -->
								<!-- 审批类型 1船舶保养工单 2船舶维修工单 3物资领用工单 4物资请购工单 -->
								<view class="title">
									<view class="smallIcon">
										<image src="../static/image/progress/1.png" v-if="item.approvalType===1">
										</image>
										<image src="../static/image/progress/2.png" v-if="item.approvalType===2">
										</image>
										<image src="../static/image/progress/3.png" v-if="item.approvalType===3">
										</image>
										<image src="../static/image/progress/4.png" v-if="item.approvalType===4">
										</image>
									</view>
									<text>
										{{item.approvalTypeDesc}} {{item.workOrderNo}}
									</text>
								</view>
								<template v-if="checkTab==0">
									<view class="tag-blue" v-if="item.workOrderStatus===1">审批中</view>
									<view class="tag-yellow" v-if="item.workOrderStatus===2">待完成</view>
									<view class="tag-orange" v-if="item.workOrderStatus===3">待验收</view>
									<view class="tag-black" v-if="item.workOrderStatus===4">已完成</view>
									<view class="tag-red" v-if="item.workOrderStatus===5">已驳回</view>
									<view class="tag-orange" v-if="item.workOrderStatus===6">待采购</view>
								</template>
								<template v-else>
									<view class="tag-orange" v-if="item.handleStatus===0">{{item.handleStatusDesc}}
									</view>
									<view class="tag-black" v-if="item.handleStatus===1">{{item.handleStatusDesc}}
									</view>
								</template>

							</view>
							<view class="item-mid">
								<view class="subname">
									<template v-if="item.approvalType===1||item.approvalType===2">
										船舶名称：<text class="val">{{item.boatName}}</text>
									</template>
									<template v-else>
										申请部门：<text class="val">{{item.deptName}}</text>
									</template>
								</view>
								<view class="subname">
									<template v-if="item.approvalType===1">
										保养类型：<text class="val">{{item.maintainTypeStr}}</text>
									</template>
									<template v-if="item.approvalType===2">
										维修类型：<text class="val">{{item.fixTypeStr}}</text>
									</template>
									<template v-if="item.approvalType===3||item.approvalType===4">
										申请原因：<text class="val">{{item.reason}}
										</text>
									</template>
								</view>
								<view class="subname">发起时间：<text class="val">{{item.createTime}}
									</text></view>
							</view>

						</view>
					</view>
					<u-loadmore :status="status" />
				</template>
				<template v-else>
					<u-empty v-if="params.workOrderNo" text="暂无搜索结果" width="320rpx" height="320rpx"
						icon="../static/image/list-no-data.png" class="nodata"></u-empty>
					<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../static/image/chart-no-data.png"
						class="nodata"></u-empty>
				</template>
			</scroll-view>
		</view>




		<u-popup :show="showFixType" mode="bottom" @close="showFixType = false" :closeable="true">
			<view class="optionsCon">
				<view class="changeTitle">{{changeTitle}}
				</view>
				<view class="list-list" v-if="options && options.length>0">
					<view v-for="(item, index) in options" :key="index" @click="selectClick(item,index)"
						:class="item.name===checkIndex?'item active':'item'">
						{{item.name}}
					</view>
				</view>
			</view>

		</u-popup>
		<!-- <u-action-sheet :safeAreaInsetBottom="true" @select="selectClick" :title="changeTitle"
			@close="showFixType = false"  :actions="options" :show="showFixType">
		</u-action-sheet> -->
	</view>

</template>

<script>
	import search from '@/components/search/index.vue'
	import {
		myApprovalList,
		myHandleList
	} from '@/api/progress.js'
	export default {
		components: {
			search
		},
		data() {
			return {
				tabList: [{
					name: '我发起的工单'
				}, {
					name: '我处理的工单',
					badge: {
						value: 0,
					}
				}],
				showFixType: false,
				changeTitle: '',
				options: [],
				changeIndex: null,
				total: 0,
				workOrderStatusOptions: [{
					name: '全部',
					type: ''
				}, {
					name: '审批中',
					type: 1
				}, {
					name: '待完成',
					type: 2
				}, {
					name: '待采购',
					type: 6
				}, {
					name: '待验收',
					type: 3
				}, {
					name: '已完成',
					type: 4
				}, {
					name: '已驳回',
					type: 5
				}], // 1审批中 2待完成 3待验收 4已完成 5已驳回 6待采购
				approvalTypeOptions: [{
					name: '全部',
					type: ''
				}, {
					name: '船舶保养工单',
					type: 1
				}, {
					name: '船舶维修工单',
					type: 2
				}, {
					name: '物资领用工单',
					type: 3
				}, {
					name: '物资请购工单',
					type: 4
				}], // 审批类型 1船舶保养工单 2船舶维修工单 3物资领用工单 4物资请购工单
				handleStatusOptions: [{
					name: '待处理',
					type: 0
				}, {
					name: '已处理',
					type: 1
				}], // 处理状态 0 待处理、1 已处理
				approvalTypeName: '',
				workOrderStatusName: '',
				handleStatusName: '待处理',
				status: 'loadmore',
				list: [],
				checkTab: 0,
				params: {
					workOrderNo: '',
					pageNum: 1,
					pageSize: 10,
					approvalType: null,
					workOrderStatus: null,
					handleStatus: 0,
				},
				cancelText: '',
				checkIndex: '',
				isloading: false
			}
		},
		onLoad(option) {
			if (option.checkTab) {
				this.checkTab = Number(option.checkTab)
			}

			// this.params.pageNum = 1
			// this.list = []
			// this.getList()

		},
		onShow() {
			const reqData = {
				workOrderNo: '',
				pageNum: 1,
				pageSize: 10,
				approvalType: null,
				workOrderStatus: null,
				handleStatus: 0,
			}
			myHandleList(reqData).then(res => {
				const {
					total,
				} = res
				this.tabList[1].badge.value = total
			}).finally(() => {
				uni.hideLoading()
			})
			this.params.pageNum = 1
			this.list = []
			this.getList()
		},

		onPullDownRefresh() {
			this.params.pageNum = 1
			this.total = 0
			this.isloading = false
			this.list = []
			this.getList(() => uni.stopPullDownRefresh())
		},

		methods: {
			navTo(item) {
				let url = ''
				if (item.approvalType === 1) {
					url = '/subMaintenance/maintain/detail?id=' + item.workOrderId
				}
				if (item.approvalType === 2) {
					url = '/subMaintenance/repair/detail?id=' + item.workOrderId
				}
				if (item.approvalType === 3) {
					url = '/subMaintenance/requisition/detail?id=' + item.workOrderId
				}
				if (item.approvalType === 4) {
					url = '/subMaintenance/purchase/detail?id=' + item.workOrderId
				}
				uni.navigateTo({
					url: url
				})
			},
			open(index) {
				if (index === 1) {
					this.changeTitle = '选择审批状态'
					this.options = this.workOrderStatusOptions
					this.cancelText = "清空"
					this.checkIndex = this.workOrderStatusName || '全部'
				}
				if (index === 2) {
					this.changeTitle = '选择工单类型'
					this.options = this.approvalTypeOptions
					this.cancelText = "清空"
					this.checkIndex = this.approvalTypeName || '全部'
				}
				if (index === 3) {
					this.changeTitle = '选择处理状态'
					this.options = this.handleStatusOptions
					this.cancelText = ""
					this.checkIndex = this.handleStatusName || '全部'
				}
				this.changeIndex = index
				this.showFixType = true
			},
			clickTab(item) {
				this.$refs.search.clearSearch()
				console.log('item', item);
				const {
					index
				} = item
				this.checkTab = index
				this.params = {
					workOrderNo: '',
					pageNum: 1,
					pageSize: 10,
					approvalType: null,
					workOrderStatus: null,
					handleStatus: 0,
					approvalType: ''
				}
				this.workOrderStatusName = ''
				this.approvalTypeName = ''
				this.handleStatusName = "待处理"
				this.list = []
				this.getList()

			},
			selectClick(item, index) {
				this.checkIndex = item.name
				if (this.changeIndex === 2) {
					this.params.approvalType = item.type
					this.approvalTypeName = item.type ? item.name : ''
				}
				if (this.changeIndex === 1) {

					this.params.workOrderStatus = item.type
					this.workOrderStatusName = item.type ? item.name : ''
				}
				if (this.changeIndex === 3) {
					this.params.handleStatus = item.type
					this.handleStatusName = item.name
				}
				this.params.pageNum = 1
				this.list = []
				this.getList()
				this.showFixType = false
			},
			loadmore() {

				if (this.list.length >= this.total) {
					this.status = 'nomore'
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getList()
			},
			search(keyword) {
				this.params.workOrderNo = keyword
				this.params.pageNum = 1
				this.list = []
				this.getList()
			},
			async getList(cb) {
				this.status = 'loading';
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = false
				// 只要数据请求完毕，就立即按需调用 cb 回调函数
				cb && cb()

				if (this.checkTab === 0) {
					myApprovalList(this.params).then(res => {
						const {
							total,
							rows
						} = res
						if (rows && rows.length > 0) {
							this.list = [...this.list, ...rows]
						}
						this.total = total

						if (total === 0 || this.list.length === total) {
							this.status = 'nomore'
						}
					}).finally(() => {
						uni.hideLoading()
					})
				} else {
					myHandleList(this.params).then(res => {
						const {
							total,
							rows
						} = res
						if (rows && rows.length > 0) {
							this.list = [...this.list, ...rows]
						}
						this.total = total
						if (total === 0 || this.list.length === total) {
							this.status = 'nomore'
						}
					}).finally(() => {
						uni.hideLoading()
					})
				}

			}

		}
	}
</script>
<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		height: 100vh;
		background: #F5F7F9;

		.optionsCon {
			width: 100vw;

			.changeTitle {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}

			.list-list {
				.item {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
					border-bottom: 1rpx solid #f9f9f9;
				}

				.active {
					color: #3685E6;
				}
			}
		}

		.con-con {


			.search-text {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				/deep/ .u-icon__icon {
					margin-left: 10rpx;
				}

				.status {
					font-size: 26rpx;
					font-weight: 400;
					color: #3685E6;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					width: 50%;
				}

				.approval {
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

				}
			}

			.list {
				width: 100vw;

				.item {
					margin-bottom: 10rpx;
					background: #fff;

					.item-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border: 1rpx solid #F2F6FC;
						padding: 27rpx 30rpx 22rpx 30rpx;

						.title {
							font-size: 32rpx;
							font-weight: 500;
							color: #323232;
							display: flex;
							align-items: center;

							.smallIcon {
								margin-right: 16rpx;
								width: 40rpx;
								height: 40rpx;

								image {
									width: 40rpx;
									height: 40rpx;
								}

							}
						}

						.tag-blue {
							width: 80rpx;
							height: 36rpx;
							background: rgba(54, 133, 230, 0.1);
							border-radius: 4rpx;
							border: 2rpx solid #3685E6;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 500;
							color: #3685E6;
						}

						.tag-yellow {
							width: 80rpx;
							height: 36rpx;
							background: rgba(241, 195, 23, 0.1);
							border-radius: 4rpx;
							border: 2rpx solid #F1C317;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 500;
							color: #F1C317;
						}

						.tag-orange {
							width: 80rpx;
							height: 36rpx;
							background: rgba(#FF8C21, 0.1);
							border-radius: 4rpx;
							border: 2rpx solid #FF8C21;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 500;
							color: #FF8C21;
						}

						.tag-black {
							width: 80rpx;
							height: 36rpx;
							background: rgba(#BBBFC7, 0.1);
							border-radius: 4rpx;
							border: 2rpx solid #BBBFC7;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 500;
							color: #BBBFC7;
						}

						.tag-red {
							width: 80rpx;
							height: 36rpx;
							background: rgba(#FF654E, 0.1);
							border-radius: 4rpx;
							border: 2rpx solid #FF654E;
							line-height: 36rpx;
							text-align: center;
							font-size: 20rpx;
							font-weight: 500;
							color: #FF654E;
						}
					}

					.item-mid {
						padding: 28rpx 30rpx;

						.name {
							font-size: 30rpx;
							font-weight: 500;
							color: #323232;
							margin-bottom: 8rpx;
						}

						.subname {
							font-size: 28rpx;
							font-weight: 400;
							color: #909399;
							line-height: 70rpx;

							.val {
								color: #323232;
							}
						}
					}


				}
			}

		}
	}
</style>
